<!-- home -->
<template>
  <div class="bgcf">
    <van-nav-bar title="资讯" ref="nav" />
    <div class="index-container" v-bind:style="{ minHeight: `calc(100vh - ${tabBarHeight}px - ${navBarHeight}px)` }">
      <div class="warpper" v-bind:style="{ marginTop: `${navBarHeight}px` }" ref="container">
        <van-loading size="40px" v-if="isloadig === false">加载中...</van-loading>
        <div class="vant-swiper" v-if="bestList.length > 0">
          <div class="newIcon">
            <img src="@/assets/img/hot.png" alt="" />
            <span>最新</span>
          </div>
          <van-swipe :autoplay="3000" :show-indicators="false" style="transform:translate3d(0,0,0);overflow:hidden;">
            <van-swipe-item v-for="(item, index) in bestList" :key="index">
              <router-link :to="{ path: '/home/newDetails', query: { id: item.id } }">
                <img :src="item.image" style="max-height: 100%;max-width: 100%;transform:translate3d(0,0,0)"  />
                <div class="title line1">{{ item.title }}</div>
              </router-link>
            </van-swipe-item>
          </van-swipe>
        </div>
        <!--出彩资讯-->
        <div class="new-box" v-if="list.length >0">
          <div class="new-title">
            <span class="boder"></span>
            出彩资讯
          </div>

          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            :immediate-check="false"
            @load="onRefresh()"
          >
            <div class="new-list ov" v-for="(item, index) in list" :key="index">
              <router-link :to="{ path: '/home/newDetails', query: { id: item.id } }" class="flex-btw">
                <div class="img ">
                  <img :src="item.image" alt="" />
                </div>
                <div class="cont ">
                  <div class="title line2">{{ item.title }}</div>
                  <div class="new-tip">
                    <span class="fl">阅读：{{ item.reads }}</span>
                    <span class="fr">{{ item.created_at }}</span>
                  </div>
                </div>
              </router-link>
            </div>
          </van-list>
        </div>
         <noData :show="showNodata"  ></noData>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { formatTime, transdate } from '../../utils/index'
import { getArticleindex, getArticleBestlist } from '@/api/user.js'
import noData from '@/components/noData'
export default {
  name: 'Index',
  components: {
    noData
  },
  data() {
    return {
      page: 1,
      loadTitle: '',
      loading: false,
      loadend: false,
      navBarHeight: 0,
      images: [],
      list: [],
      testDate: '',
      pagesize: 10,
      refreshing: false,
      finished: false,
      bestList: [],
      num: 1,
      limit: 15,
      isloadig: false
    }
  },

  computed: {
    ...mapGetters(['tabBarHeight']),
    showNodata() {
       return this.list.length === 0 && this.isloadig === true
    }
  },

  mounted() {
    this.navBarHeight = this.$refs.nav.$el.offsetHeight // 获取组件元素高度
  },
  created() {
    this.getLists()
    this.onArticleBestlist()
  },

  methods: {
    onLoad(data) {
      if (this.refreshing) {
        this.list = []
        this.refreshing = false
        this.page = 1
      }
      this.list.push(...data)
      this.loading = false
      this.page = this.page + 1
      if (data.length <= 0) {
        this.finished = true
      }
    },
    onRefresh() {
      // // 清空列表数据
      this.finished = false
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      // 重新加载数据
      this.getLists()
    },
    getLists() {
      const params = {
        page: this.page,
        pagesize: this.pagesize
      }
      getArticleindex(params).then(res => {
        this.isloadig = true
        this.onLoad(
          res.data.map(item => {
            var time1 = transdate(item.created_at)
            item.created_at = formatTime(time1)
            return item
          })
        )
      })
    },

    onArticleBestlist() {
      const that = this
      const q = {
        page: that.num,
        pagesize: that.limit
      }
      getArticleBestlist(q).then(res => {
        const datas = res.data
        that.bestList.push.apply(that.bestList, datas)
        that.num = that.num + 1
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.bgcf {
  background: #fff;
}
.index-container {
  background: #fff;
  .warpper {
    padding: 15px;
    padding-bottom: 0;
    .vant-swiper {
      height: 167px;
      width: 100%;
      background-color: #fafafa;
      box-sizing: border-box;
      border-radius: 8px;
      position: relative;
      .newIcon {
        position: absolute;
        z-index: 1;
        top: 8.5px;
        left: 7.5px;
        padding: 3px 8px;
        background: #F61E51;
        opacity: 1;
        border-radius: 4px;
        font-size: 14px;
        color: #fff;
        letter-spacing: 1px;
        img {
          width: 11px;
          height: 14px;
          margin-right: 6px;
        }
      }
    }
    .van-swipe__track {
      height: 333px;
    }

    .van-swipe {
      height: 167px;
      width: 100%;
      background-color: #eaeaea;
      box-sizing: border-box;
      border-radius: 8px;
      position: relative;
      .van-swipe-item{
        width: 100%;
        height: 166px;
         border-radius: 8px;
        img {
          width: 100%;
          height: 167px;
          border-radius: 8px;
        }
      }

      .title {
        position: absolute;
        bottom: 0px;
        color: #fff;
        font-size: 16px;
        width: 100%;
        padding:8px 6px 8px 8px;
		   box-sizing: border-box;
       background: rgba(0,0,0,0.2);
      }
    }

    .new-box {
      margin-top: 16px;

      .new-title {
        color: #F61E51;
        font-size: 17px;
        padding-left: 10px;
        line-height: 1.2;

        .boder {
          width: 5px;
          height: 16.5px;
          background: #F61E51;
          opacity: 1;
          box-sizing: border-box;
          display: inline-block;
        }
      }

      .new-list {
        position: relative;
        padding: 12px 0;
        box-sizing: border-box;
        border-bottom: 1px solid #efefef;
        .img {
          width: 111px;
          height: 83px;
          img {
            height: 100%;
            width:  100%;
            object-fit: cover;
            background-color: #fafafa;
            border-radius: 8px;
          }
        }

        .cont {
          flex: 1;
          margin-left: 12px;
          display: flex;
          justify-content:space-between;
          flex-direction: column;
          .title {
            font-size: 17px;
            color: #333333;
          }

          .new-tip {
            width: 100%;
            // position: absolute;
            // bottom: 18px;
            width: inherit;
            color: #D3D3D3;
          }
        }
      }
    }
  }
}
.index-container .nodata {
  width: 100%;
  height: 200px;
  transform: translate(0);
  z-index: 10;
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: flex-end;
}
/deep/ .nodata_img {
  width: 100px;
  height: 100px;
  margin-top: 20px;
  margin-bottom: 20px !important;
}

</style>
